<template>
  <l-layout class="l-tab-page">
    <template #left>
      <l-panel :title="$t('角色分类')" style="padding-right: 0">
        <el-tree
          :data="dataItemTree_Rolecategory"
          @node-click="handleNodeClick"
        >
          <span class="lr-tree-node" slot-scope="{ node }">
            <i class="el-icon-notebook-2"></i>
            {{ $t(node.label) }}
          </span>
        </el-tree>
      </l-panel>
    </template>
    <l-select-panel
      style="padding: 8px; padding-left: 0"
      ref="selectPanel"
      :columns="columns"
      :isPage="false"
      :loadSelectTable="loadSelectTable"
      :multiple="multiple"
      model="client"
      valueKey="f_RoleId"

      @rowClick="rowClick"
    >
      <template v-slot:f_Category="scope">
        {{ lr_dataItemName(lr_dataItem["rolecategory"], scope.row.f_Category) }}
      </template>
    </l-select-panel>
  </l-layout>
</template>

<script>
const api = window.$api.organization.role;
export default {
  name: "l-role-select-panel",
  components: {},
  props: {
    multiple: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      columns: [
        { label: "编号", prop: "f_EnCode", minWidth: "110" },
        { label: "名称", prop: "f_FullName", minWidth: "120" },
        { label: "分类", prop: "f_Category", width: "140", align: "center" },
      ],
    };
  },
  computed: {
    dataItemTree_Rolecategory() {
      return this.lr_dataItemTree(this.lr_dataItem["rolecategory"]);
    },
  },
  mounted() {
    this.lr_loadDataItem("rolecategory");
    this.loadTableData();
  },
  methods: {
    async loadSelectTable() {
      let data = await this.$awaitWraper(api.getList())
      return data;
    },
    loadTableData() {
      this.$refs.selectPanel.init();
    },
    handleNodeClick(data) {
      this.$refs.selectPanel.filter({f_Category:data.value});
    },
    resetForm() {
      this.$refs.selectPanel.reset();
      this.loadTableData();
    },
    async getForm() {
      let select =  await this.$refs.selectPanel.getSelected(); 
      return select;
    },
    rowClick(row){
        this.$emit("rowClick", row);
    }
  },
};
</script>
